<template>
	<view class="content">
		<view class="phone" style="margin-top: 69rpx;">
			<input class="inputPhone" type="number" placeholder="请输入手机号" placeholder-class="phonePlaceSytle" v-model="telNum" @blur="checkPhoneNum" maxlength="11"/>
			<image v-if="telNum" :src="staticUrl + '/image/icon_clear.png'" @click="clearInput()"></image>
		</view>
		<view class="phone" style="margin-top: 24rpx;">
			<input class="inputPhone" type="number" placeholder="请输入验证码" placeholder-class="phonePlaceSytle" v-model="verifCode" maxlength="4"/>
			<text class="getCode" v-if="!sendMsgDisabled" @click="getloginCode()">获取验证码</text>
			<text class="getCode" v-else>{{ codeTime }}秒后重新获取</text>
		</view>
		<!-- 提示文字 -->
		<view class="hint"><text v-text="checkText"></text></view>
		<view class="loginBtn content" @click="commit()"><text>确定</text></view>
	</view>
</template>

<script>
const app = getApp();
import * as api from '@/api/login';
export default {
	data() {
		return {
			staticUrl:this.$config.StaticUrl,
			telNum: '',
			checkText: '', //提示性文字
			verifCode: '', //验证码
			getCodeText: '获取验证码',
			phoneReg: new RegExp(/^1[3-9]\d{9}$/), //手机号正则验证
			sendMsgDisabled: false,
			codeTime: 59
		};
	},
	methods: {
		// 监听手机号输入
		checkPhoneNum: function(event) {
			let phoneNum = event.detail.value;
			if (phoneNum.trim().length <= 0) {
				this.checkText = '请输入手机号';
				return;
			} else if (!this.phoneReg.test(phoneNum)) {
				this.checkText = '手机号格式错误';
				return;
			} else {
				this.checkText = '';
			}
		},
		clearInput() {
			this.telNum = ''
		},
		// 获取验证码
		getloginCode() {
			let that = this;
			//做非空判断
			let phoneNum = that.telNum;
			let userId = this.$store.state.userInfo.currentUser.userId;
			console.log(userId);
			if (phoneNum.trim().length <= 0) {
				that.checkText = '请输入手机号';
				return;
			} else if (!that.phoneReg.test(phoneNum)) {
				that.checkText = '手机号格式错误';
				return;
			} else {
				that.checkText = '';
			}
			that.sendMsgDisabled = true;
			// 开始切换文字倒计时
			let codeInterval = setInterval(() => {
				if (that.codeTime-- <= 1) {
					that.codeTime = 59;
					that.sendMsgDisabled = false;
					clearInterval(codeInterval);
				}
			}, 1000);
			let data = {
				userId:userId,
				action:"requestCode",
				params: {
				     mobile: phoneNum
				 }
			};
			//调用接口请求验证码
			api.updateEiUserPhone(data).then(function(res) {
				console.log(res);
				if (res.data.code == 2000) {
					that.$toast("验证码已发送，请查收!",{icon:'none'});
				} else if(res.data.message == "该手机号已绑定其他用户") {
					that.$toast("该手机号已绑定其他用户!",{icon:'none'});
					that.sendMsgDisabled = false;
					clearInterval(codeInterval);
				}
			})
			.catch(function(error) {
				console.log('get verification fail', error);
			});
		},
		// 提交新的手机号
		commit() {
			let that = this;
			let phoneNum = that.telNum;
			let userId = this.$store.state.userInfo.currentUser.userId;
			if (phoneNum.trim().length <= 0) {
				that.checkText = '请输入手机号';
				return;
			} else if (!that.phoneReg.test(phoneNum)) {
				that.checkText = '手机号格式错误';
				return;
			} else if (that.verifCode.trim().length <= 0) {
				this.checkText = '请输入验证码';
				return;
			} else {
				let data = {
					userId:userId,
					action:"update",
					params: {
					     mobile: phoneNum,
						 verificationCode: that.verifCode
					 }
				};
				api.updateEiUserPhone(data).then(function (res) {
					console.log(res);
					if(res.data.code == 2000){
						that.updateStore();
						// 更换成功后返回前一个页面
						uni.navigateBack({
							delta:1
						});
					}
					else{
						that.checkText = res.data.message;
					}
				}).catch(function (error) {
					console.log('login fail', error);
					that.checkText = '请求出错';
				})
			}
		},
		// 将更改的信息同步到store（storage）
		updateStore(){
			// 同步一些状态
			let userInfo = this.$store.state.userInfo;
			userInfo.currentUser.phone = this.telNum;
			userInfo.loginUserList.forEach((item,index)=> {
				if(item.userId == userInfo.currentUser.userId){
					item.phone = this.telNum;
				}
			});
			this.$store.commit('userInfo',userInfo);
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.phone {
	width: 700rpx;
	height: 122rpx;
	background-color: #ffffff;
	border-radius: 15px;
	display: flex;
	align-items: center;
	position: relative;
}
.phone image {
	position: absolute;
	width: 35rpx;
	height: 35rpx;
	right: 50rpx;
}

.inputPhone {
	margin-left: 45rpx;
	width: 600rpx;
	height: 100%;
}

.phonePlaceSytle {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}

.getCode {
	font-size: 32rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #0659c7;
	position: absolute;
	right: 18px;
	z-index: 900;
}
.hint {
	font-size: 28rpx;
	color: #f6464e;
	height: 20px;
	width: 80%;
	margin-top: 20rpx;
}
.loginBtn {
	width: 700rpx;
	height: 100rpx;
	border-radius: 50px;
	background-color: #0659c7;
	margin-top: 80rpx;
}
.loginBtn:active {
	background-color: #007aff;
}
.loginBtn text {
	font-size: 44rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #ffffff;
}
</style>
